<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客户跟进管理</title>
<script type="text/javascript"	src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript"	src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js"	type="text/javascript"></script>
<script	src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script	src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js"	type="text/javascript"></script>
<script	src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js"	type="text/javascript"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/layui.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/global.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css">


<style>
.container {
	width: 85%;
}

.modal-company {
	width: 700px;
}

.modal-body {
	max-height: 750px
}

.modal-body-company {
	height: 600px;
}

.modal-account {
	width: 500px;
	z-index: 2000;
	left: 55%;
}

.modal-account.fade.in {
	top: 15%;
}

.modal-body-account {
	height: 300px;
}

.modal-customerFollowUp {
	width: 700px;
}

.modal-body {
	max-height: 750px
}

.modal-body-customerFollowUp {
	height: 450px;
}

.table tbody tr td {
	table-layout: fixed;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>

</head>

<body>
	<%@include file="/webpage/frame/top.jsp"%>
	<div class="container">
		<div id="account-modal" class="modal-account modal fade" style="display:none">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <span class="modal-title"></span>
                    <span class="alert-account"></span>
                </div>
                <div class="modal-body-account modal-body">
                    <div class="form-group">
                        <label>跟进标题</label>
                        <input type="text" id="atitle" readonly="readonly" class="form-control" name="atitle" placeholder="跟进标题">
                    </div>
                    <div class="form-group">
                        <label>跟进人</label>
                        <input type="text" id="auserName" readonly="readonly" class="form-control" name="auserName" placeholder="跟进人">
                    </div>
                    <div class="form-group">
                    	 <label>跟进时间</label>
                    	 <input type="text" id="atime" class="form-control" placeholder="跟进时间" name="atime" id="accountPlatformName" readonly="readonly"/>
                    </div>
                    <div class="form-group">
                        <label>跟进内容</label>
                        <textarea placeholder="跟进内容" id="acontent" readonly="readonly" class="layui-textarea"  name="acontent" ></textarea>                     
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"  data-dismiss="account-modal" id="follow_up_detail_close" >关闭</button>
                </div>
            </div>
        </div>
    </div>
		<div id="modal" class="modal-customerFollowUp modal fade"
			style="display: none">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title"></h4>
					</div>
					<div class="modal-body-customerFollowUp modal-body">
						<span id="customer_follow_up"></span>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<div id="modal1" class="modal-customerFollowUp modal fade"
			style="display: none">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>

						<span class="modal-title"></span>
                    <span class="alert-account"></span>
					</div>
					<div class="modal-body-company modal-body">
					<span id="hide_company_id" style="display:none"></span>
						<div class="form-group">
							<label>跟进标题</label> <input type="text" class="form-control"
								name="follow_up_title" id="follow_up_title" placeholder="">
						</div>
						<div class="form-group">
							<label>跟进内容</label>
							<textarea placeholder="" class="layui-textarea" name="follow_up_content" id="follow_up_content"></textarea>
						</div>
						<div class="form-group">
								<label></label>
								<button type="button" class="btn btn-primary submit" style="float:right" id="add_followuP">增加跟进</button>
								<br>
								<br>
								跟进记录
						</div>
						<!-- 	                 <p class="account-toolbar">
                 	<a class="create-account btn btn-default" href="javascript:">新建账户</a>                 
                 </p> -->
							<table id="FollowUpList" data-show-refresh="false"
								data-click-to-select="true" data-pagination="true"
								data-toolbar=".account-toolbar" data-url=""
								class="table table-hover table-bordered"
								style='table-layout: fixed; word-break: break-all; word-wrap: break-all;'>
								<colgroup>
									<col style="width:25%">
									<col style="width:35%">
									<col style="width:15%">
									<col style="width:25%">
								</colgroup>
								<thead>
									<tr>
										<th data-field="id" data-visible="false">ID</th>
										<th data-field="followUpTitle">跟进标题</th>
										<th data-field="followUpContent" >跟进内容</th>
										<th data-field="userName">跟进人</th>
										<th data-field="followUpTime">跟进时间</th>
									</tr>
								</thead>
							</table>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="account_close">关闭</button>
					</div>
				</div>
			</div>
		</div>


		<table id="companytable" data-show-refresh="true" data-search="true"
			data-click-to-select="true" data-show-export="true"
			data-query-params="queryParams" data-pagination="true"
			data-toolbar=".toolbar" class="table table-hover table-bordered"
			style='table-layout: fixed; word-break: break-all; word-wrap: break-all;'>
			<colgroup>
				<!-- <col style="width:5%"> -->
				<col style="width:20%">
				<col style="width:10%">
				<col style="width:15%">
				<col style="width:15%">
				<col style="width:20%">
				<col style="width:15%">
			
			</colgroup>
			<thead>
				<tr>
					<!-- 	<th data-field="state" data-radio="false"></th> -->
					<!-- <th data-field="state" data-checkbox="true"></th> -->
					<th data-field="id" data-show="true" data-visible="false">id</th>
					<th data-field="companyName" data-sortable="true"
						style="width: 20%;">跟进客户公司</th>
					<th data-field="userName" data-sortable="true" style="width: 10%;">跟进人</th>
					<th data-field="followUpTime" data-sortable="true"
						style="width: 20%;">最新跟进时间</th>
					<th data-field="followUpTitle" data-sortable="false"
						style="width: 20%;">最新跟进标题</th>
					<th data-field="followUpContent" data-sortable="false"
						style="width: 20%;">最新跟进内容</th>
<!-- 					<th data-field="action" data-align="center"
						data-formatter="followUp" data-events="actionEvents"
						style="width: 10%;">增加跟进</th>
 -->					<th data-field="action1" data-align="center"
						data-formatter="followUpList" data-events="actionEvents"
						style="width: 10%;">跟进操作</th>
				</tr>
			</thead>

		</table>
	</div>
	<script>
	//定义一个全局变量记录是否有添加跟进
		var hadFollowUP=0;
		var API_URL = '${pageContext.request.contextPath}/companyController.do?getcustomerFollowUp';
		//获取加载公司列表
		var $table = $('#companytable').bootstrapTable({
			url : API_URL,
			pageSize : 25,
			pageList : [ 15, 25, 100, 500 ]
		}), $account_modal = $('#account-modal').modal({show: false}),
		$modal = $('#modal').modal({
			show : false
		}), $modalList = $('#modal1').modal({
			show : false
		}), $alert = $('.alert').hide();

	/* 	function followUp(value, row, index) {
			buttonArray = new Array();
			buttonArray[0] = '<a class="followUp btn btn-default" href="javascript:" title="增加跟进">增加跟进</a>';
			return buttonArray.join(' ');
		} */

		function followUpList(value, row, index) {
			buttonArray1 = new Array();
			buttonArray1[0] = '<a class="followUpList btn btn-default" href="javascript:" title="添加跟进或者查看跟进记录">跟进操作</a>';
			return buttonArray1.join(' ');
		}
	

 	/* 	//添加跟进弹出窗口
		function showModal_followUp() {
			$modal.find('#customer_follow_up').html("aaa");
			$modal.modal('show');
		} */ 
 		
		//查看跟进信息弹出窗口
		function showModal_followUp_list() {
			$modalList.modal('show');
		}
		window.actionEvents = {
			'click .followUp' : function(e, value, row) {
				showModal_followUp();
			},
			'click .followUpList' : function(e, value, row) {
				var FOLLOWUP_URL = '${pageContext.request.contextPath}/companyController.do?getFollowUpList&id='+row.id
				$('#hide_company_id').text(row.id);
				$("#FollowUpList").bootstrapTable('destroy'); 
				//获取加载公司列表
				var $table = $('#FollowUpList').bootstrapTable({
					url : FOLLOWUP_URL,
					singleSelect:true,
					pageSize : 25,
					pageList : [ 15, 25, 100, 500 ]
				}),$alert = $('.alert').hide();
				showModal_followUp_list();
			}
		};
		
		$(function () {
			$('#follow_up_detail_close').click(function(){
	    		$account_modal.modal('hide');
	    		$('#atitle').val('');
        		$('#acontent').val('');
        		$('#atime').val('');
        		$('#auserName').val('');
	    		$("#alert-account").hide();
	    	});
			
			//跟进记录中单击弹出详情窗口
			  $('#FollowUpList').on("click-row.bs.table",function(e, row, $element) {
				  var follow_up_id = row.id;
				  var follow_up_content = row.followUpContent
				  var submitData = {'follow_up_id':follow_up_id,"followUpContent":follow_up_content};
				  var submitPath = '${pageContext.request.contextPath}/companyController.do?getFollowUpDetail';
					$.ajax({
		                url: submitPath,
		                type: 'post',
		                //contentType: 'application/json',
		                dataType: 'json', //预期的服务器响应的数据类型。
		                data: submitData,
		                success: function (data,status) {
		                	if(data.success){
		                		$('#atitle').val(data.attributes.followUpTitle);
		                		$('#acontent').val(data.attributes.followUpContent);
		                		$('#atime').val(data.attributes.followUpTime);
		                		$('#auserName').val(data.attributes.userName);
				  				$account_modal.modal('show');
		                	}else{
		                		alert(data.msg);
				  				$account_modal.modal('show');
		                	}
		                }
		            });
				  });
			
			$('#account_close').click(function(){
	    		$('#follow_up_title').val("");
	    		$('#follow_up_content').val("");
	    		$modalList.modal('hide');
	    		if(hadFollowUp==1){
	    		var API_URL = '${pageContext.request.contextPath}/companyController.do?getcustomerFollowUp';
	    		$('#companytable').bootstrapTable('refresh', {url: API_URL}); 
	    		//再次将全局变量记录是否有添加跟进置为0
	    		hadFollowUp=0;
	    		}
	    	});
			
			$('#add_followuP').click(function(){
				var ftitle = $('#follow_up_title').val();
				var fcontent = $('#follow_up_content').val();
				var companyId = $('#hide_company_id').text();
				var submitData = {'followUpTitle':ftitle,'followUpContent':fcontent,'companyId':companyId};
				var submitPath = '${pageContext.request.contextPath}/companyController.do?addFollowUp';
				$.ajax({
	                url: submitPath,
	                type: 'get',
	                //contentType: 'application/json',
	                dataType: 'json', //预期的服务器响应的数据类型。
	                data: submitData,
	                success: function (data,status) {
	                   // result = JSON.parse(data);
	                    if(data.success){
	                    	alert(data.msg);
	                    	var $table =$('#FollowUpList');
	                    	$('#follow_up_title').val("");
	        	    		$('#follow_up_content').val("");
	        	    		hadFollowUp=1;
	        	    		var API_URL = '${pageContext.request.contextPath}/companyController.do?getFollowUpList&id='+companyId;
	        	    		$table.bootstrapTable('refresh', {url: API_URL}); 
	                    }else{
	                    	alert(data.msg);
	                    }
	                },
	                error: function () {
	                }
	            });
	    	});
		});
	</script>

	<%@include file="/webpage/frame/bottom.jsp"%>
</body>
</html>